<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-row>
<!--      <el-form-item label="购买日期" prop="OrderDay">-->
<!--        <el-input-->
<!--          v-model="queryParams.OrderDay"-->
<!--          placeholder="请输入购买日期"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      <el-form-item label="" prop="Status" >
<!--  @change="changeStatus" 改变状态时，勾选默认全部      -->
        <el-select v-model="queryParams.Status" @clear="clearStatus" placeholder="请选择审核状态" style="width: 240px; margin-right: 10px" clearable>
          <el-option
              v-for="dict in service_servicerequest_status"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="Created" style="width: 240px; margin-right: 10px" >
        <el-date-picker
            v-model="dateRange"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="申请开始日期"
            end-placeholder="申请结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="" prop="Name">
        <el-input
            v-model="queryParams.Name"
            placeholder="请输入客户姓名"
            clearable
            @keyup.enter="handleQuery"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="" prop="Mobile">
        <el-input
            v-model="queryParams.Mobile"
            placeholder="请输入客户手机号"
            clearable
            @keyup.enter="handleQuery"
            style="width: 240px"
        />
      </el-form-item>
        <el-form-item label="" prop="cardNumber">
          <el-input
              v-model="queryParams.cardNumber"
              placeholder="请输入质保卡卡号"
              clearable
              @keyup.enter="handleQuery"
              style="width: 240px"
          />
        </el-form-item>
      <el-form-item label="" prop="auditBy">
        <el-input
            v-model="queryParams.auditBy"
            placeholder="请输入审核人"
            clearable
            @keyup.enter="handleQuery"
            style="width: 240px"
        />
      </el-form-item>
      <el-form-item label="" prop="auditTime" style="width: 240px; margin-right: 10px" >
        <el-date-picker
            v-model="dateRange2"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="-"
            start-placeholder="审核开始日期"
            end-placeholder="审核结束日期"
        ></el-date-picker>
      </el-form-item>
<!--      <el-form-item label="会员ID" prop="MemberId">-->
<!--        <el-input-->
<!--          v-model="queryParams.MemberId"-->
<!--          placeholder="请输入会员ID"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="质保卡下标" prop="TireIndex">-->
<!--        <el-input-->
<!--          v-model="queryParams.TireIndex"-->
<!--          placeholder="请输入质保卡下标"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
<!--      <el-form-item label="轮胎条形码" prop="NewTireCode">-->
<!--        <el-input-->
<!--          v-model="queryParams.NewTireCode"-->
<!--          placeholder="请输入轮胎条形码"-->
<!--          clearable-->
<!--          @keyup.enter="handleQuery"-->
<!--        />-->
<!--      </el-form-item>-->
      </el-row>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-col>
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="Plus"-->
<!--          @click="handleAdd"-->
<!--          v-hasPermi="['merchant:servicerRquest:add']"-->
<!--        >新增</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="success"-->
<!--          plain-->
<!--          icon="Edit"-->
<!--          :disabled="single"-->
<!--          @click="handleUpdate"-->
<!--          v-hasPermi="['merchant:servicerRquest:edit']"-->
<!--        >修改</el-button>-->
<!--      </el-col>-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="danger"-->
<!--          plain-->
<!--          icon="Delete"-->
<!--          :disabled="multiple"-->
<!--          @click="handleDelete"-->
<!--          v-hasPermi="['merchant:servicerRquest:remove']"-->
<!--        >删除</el-button>-->
<!--      </el-col>-->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="Download"
          @click="handleExport"
          v-hasPermi="['merchant:servicerRquest:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table height="calc(100vh - 300px)" stripe="true" show-overflow-tooltip="true" v-loading="loading" :data="servicerRquestList" @selection-change="handleSelectionChange">
<!--      <el-table-column type="selection" width="55" align="center" />-->
<!--      <el-table-column label="Id" align="center" prop="Id" />-->
      <el-table-column fixed="left"  label="申请日期" align="center" prop="Created" :width="flexColumnWidth('申请日期','Created')" >
        <template #default="scope">
          <span>{{ parseTime(scope.row.Created, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="left"  label="质保卡号" align="center" prop="cardNumber" :width="flexColumnWidth('质保卡号','cardNumber')" >
        <template #default="scope">
          <span>{{ scope.row.warrantyCardInfo != null ? scope.row.warrantyCardInfo.cardNumber : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条数" align="center">
        <template #default="scope">
          <span>{{ scope.row.NewTireCode != null ? scope.row.NewTireCode.length : "" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条形码" align="center" prop="NewTireCode" width="200" height="80">
        <template #default="scope">
          <div v-for="item in scope.row.NewTireCode">{{item}}</div>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条形码1图片" align="center" prop="Images" width="160">
        <template #default="scope">
<!--          <el-image v-for="(item, index) in scope.row.Images" :key="index" :src="item" :preview-src-list="[item]" :width="50" :height="50"></el-image>-->
          <image-preview  v-if="scope.row.Images" :src="scope.row.Images" :width="60" :height="60"/>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条形码2图片" align="center" prop="Images2" width="160">
        <template #default="scope">
          <!--          <el-image v-for="(item, index) in scope.row.Images" :key="index" :src="item" :preview-src-list="[item]" :width="50" :height="50"></el-image>-->
          <image-preview v-if="scope.row.Images2" :src="scope.row.Images2" :width="60" :height="60"/>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条形码3图片" align="center" prop="Images3" width="160">
        <template #default="scope">
          <!--          <el-image v-for="(item, index) in scope.row.Images" :key="index" :src="item" :preview-src-list="[item]" :width="50" :height="50"></el-image>-->
          <image-preview  v-if="scope.row.Images3" :src="scope.row.Images3" :width="60" :height="60"/>
        </template>
      </el-table-column>
      <el-table-column label="轮胎条形码4图片" align="center" prop="Images4" width="160">
        <template #default="scope">
          <!--          <el-image v-for="(item, index) in scope.row.Images" :key="index" :src="item" :preview-src-list="[item]" :width="50" :height="50"></el-image>-->
          <image-preview  v-if="scope.row.Images4" :src="scope.row.Images4" :width="60" :height="60"/>
        </template>
      </el-table-column>

<!--      <el-table-column label="购买日期" align="center" prop="OrderDay" />-->

      <el-table-column label="客户姓名" align="center" prop="Name"  :width="flexColumnWidth('客户姓名','Name')" />
      <el-table-column label="客户手机号" align="center" prop="Mobile" :width="flexColumnWidth('客户手机号','Mobile')" />
      <el-table-column label="省份" align="center" prop="Province" :width="flexColumnWidth('省份','Province')" />
      <el-table-column label="城市" align="center" prop="City" :width="flexColumnWidth('城市','City')" />
      <el-table-column label="状态" align="center" prop="Status" :width="flexColumnWidth('状态','Status')" >
        <template #default="scope">
          <dict-tag :options="service_servicerequest_status" :value="scope.row.Status" />
        </template>
      </el-table-column>
      <el-table-column label="审核人" align="center" prop="auditBy" :width="flexColumnWidth('审核人','auditBy')" />
      <el-table-column label="审核意见" align="center" prop="StatusMemo" width="600" />
      <el-table-column label="审核时间" align="center" prop="auditTime" :width="flexColumnWidth('审核时间','auditTime')" >
        <template #default="scope">
          <span>{{ parseTime(scope.row.auditTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
<!--      <el-table-column label="会员ID" align="center" prop="MemberId" />-->
<!--      <el-table-column label="质保卡下标" align="center" prop="TireIndex" />-->

<!--      <el-table-column label="备注" align="center" prop="remark" />-->
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
<!--          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['merchant:servicerRquest:edit']">修改</el-button>-->
<!--          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['merchant:servicerRquest:remove']">删除</el-button>-->
          <el-button link type="primary" icon="View" @click="handleDetail(scope.row)" v-hasPermi="['merchant:servicerRquest:query']"  v-if="scope.row.Status != 1">详 情</el-button>
          <el-button link type="primary" icon="Edit" @click="handleAudit(scope.row)" v-hasPermi="['merchant:servicerRquest:edit']"  v-if="scope.row.Status == 1">审 核</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改换胎申请对话框 -->
    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
      <el-form ref="servicerRquestRef" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="图片" prop="Images">
          <el-input v-model="form.Images" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="购买日期" prop="OrderDay">
          <el-input v-model="form.OrderDay" placeholder="请输入购买日期" />
        </el-form-item>
        <el-form-item label="申请日期" prop="Created">
          <el-date-picker clearable
            v-model="form.Created"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="请选择创建时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核备注" prop="StatusMemo">
          <el-input v-model="form.StatusMemo" type="textarea" placeholder="请输入内容" />
        </el-form-item>
<!--        <el-form-item label="会员ID" prop="MemberId">-->
<!--          <el-input v-model="form.MemberId" placeholder="请输入会员ID" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="质保卡下标" prop="TireIndex">-->
<!--          <el-input v-model="form.TireIndex" placeholder="请输入质保卡下标" />-->
<!--        </el-form-item>-->
        <el-form-item label="轮胎条形码" prop="NewTireCode">
          <el-input v-model="form.NewTireCode" placeholder="请输入轮胎条形码" />
        </el-form-item>
        <el-form-item label="remark" prop="remark">
          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 审核换胎服务对话框 -->
    <el-dialog :title="title2" v-model="open2" :width="750" :before-close="closeDialog" append-to-body>
      <el-form ref="servicerRquestRefAudit" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="Name">
              {{ form.Name }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户手机号" prop="Mobile">
            {{ form.Mobile }}
          </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质保卡号" prop="cardNumber">
              {{ form.warrantyCardInfo != null ? form.warrantyCardInfo.cardNumber : "" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买日期" prop="BuyDay">
              {{ form.warrantyCardInfo != null ? form.warrantyCardInfo.BuyDay : "" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="Province">
              {{ form.Province }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="城市" prop="City">
              {{ form.City }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="轮胎条数" prop="NewTireCode">
              {{ form.NewTireCode != null ? form.NewTireCode.length : "" }}
            </el-form-item>
          </el-col>

          <el-col :span="10">

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="轮胎条形码" prop="NewTireCode" v-if="form.NewTireCode" >
              <div style="display: flex;flex-direction: column;">
                <div v-for="(item, key) in form.NewTireCode" >
                  <div style="display: inline-block">

                  <span v-if="key==0" style="margin-right: 10px;">轮胎条形码1: {{ item }}
                      <span v-if="form.TireCode1Info">
                       (
                        {{ form.TireCode1Info.productCode ? form.TireCode1Info.productCode : "暂无成品代码" }} |
                        {{ form.TireCode1Info.productName ? form.TireCode1Info.productName : "暂无SIZE名" }} |
                        {{ form.TireCode1Info.productionDate ? form.TireCode1Info.productionDate : "暂无生产日期" }} |
                        {{ form.TireCode1Info.destination ? form.TireCode1Info.destination : "暂无目的地" }}
                        )
                      </span>
                  </span>
                  <ul v-if="key==0" style="list-style: none; display: flex; padding: 0; margin: 0;">
                    <li v-for="(v,i) in form.ImagesList"
                        style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                      <image-preview :src="form.Images" alt="" :index="i" :width="50" :height="50"/>
                      <span v-if="i == 0">胎面</span>
                      <span v-if="i == 1">胎側面</span>
                      <span v-if="i == 2">故障部位</span>
                      <span v-if="i == 3">DOT</span>
                      <span v-if="i == 4">条形码</span>
                    </li>
                  </ul>

                  <span v-if="key==1" style="margin-right: 10px;">轮胎条形码2: {{ item }}
                    <span v-if="form.TireCode2Info">
                    (
                      {{ form.TireCode2Info.productCode ? form.TireCode2Info.productCode : "暂无成品代码" }} |
                      {{ form.TireCode2Info.productName ? form.TireCode2Info.productName : "暂无SIZE名" }} |
                      {{ form.TireCode2Info.productionDate ? form.TireCode2Info.productionDate : "暂无生产日期" }} |
                      {{ form.TireCode2Info.destination ? form.TireCode2Info.destination : "暂无目的地" }}
                      )
                    </span>
                  </span>
                  <ul v-if="key==1" style="list-style: none; display: flex; padding: 0; margin: 0;">
                    <li v-for="(v, i) in form.Images2List"
                        style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                      <image-preview :src="form.Images2" alt="" :index="i" :width="50" :height="50"/>
                      <span v-if="i == 0">胎面</span>
                      <span v-if="i == 1">胎側面</span>
                      <span v-if="i == 2">故障部位</span>
                      <span v-if="i == 3">DOT</span>
                      <span v-if="i == 4">条形码</span>
                    </li>
                  </ul>

                  <span v-if="key==2" style="margin-right: 10px;">轮胎条形码3: {{item}}
                      <span v-if="form.TireCode3Info">
                      (
                        {{form.TireCode3Info.productCode ? form.TireCode3Info.productCode : "暂无成品代码"}} |
                        {{form.TireCode3Info.productName ? form.TireCode3Info.productName : "暂无SIZE名"}} |
                        {{form.TireCode3Info.productionDate ? form.TireCode3Info.productionDate : "暂无生产日期"}} |
                        {{form.TireCode3Info.destination ? form.TireCode3Info.destination : "暂无目的地"}}
                        )
                      </span>
                    </span>
                    <ul v-if="key==2" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-for="(v, i) in form.Images3List" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                        <image-preview :src="form.Images3" :index="i" alt="" :width="50" :height="50" />
                        <span v-if="i == 0">胎面</span>
                        <span v-if="i == 1">胎側面</span>
                        <span v-if="i == 2">故障部位</span>
                        <span v-if="i == 3">DOT</span>
                        <span v-if="i == 4">条形码</span>
                      </li>
                    </ul>

                    <span v-if="key==3" style="margin-right: 10px;">轮胎条形码4: {{item}}
                      <span v-if="form.TireCode4Info">
                      (
                        {{form.TireCode4Info.productCode ? form.TireCode4Info.productCode : "暂无成品代码"}} |
                        {{form.TireCode4Info.productName ? form.TireCode4Info.productName : "暂无SIZE名"}} |
                        {{form.TireCode4Info.productionDate ? form.TireCode4Info.productionDate : "暂无生产日期"}} |
                        {{form.TireCode4Info.destination ? form.TireCode4Info.destination : "暂无目的地"}}
                        )
                      </span>
                    </span>
                    <ul v-if="key==3" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-for="(v, i) in form.Images4List" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                        <image-preview :src="form.Images4" :index="i" alt="" :width="50" :height="50" />
                        <span v-if="i == 0">胎面</span>
                        <span v-if="i == 1">胎側面</span>
                        <span v-if="i == 2">故障部位</span>
                        <span v-if="i == 3">DOT</span>
                        <span v-if="i == 4">条形码</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-form-item>

            <!--   兼容之前没有条码的数据   -->
            <el-form-item label="破损图片" prop="Images" v-if="form.NewTireCode == null && form.Images != null" >
              <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
                <li v-for="(v,i) in form.ImagesList" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                  <image-preview :src="v" alt="" :width="50" :height="50" />
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
        <el-form-item label="申请日期" prop="Created">
          {{ form.Created }}
        </el-form-item>
          </el-col>
        </el-row>

        <el-divider />

        <el-form-item label="审核意见" prop="StatusMemo">
          <el-input v-model="form.StatusMemo" type="textarea" rows="5"  style="width: 400px" maxlength="100" placeholder="请输入审核意见" />
        </el-form-item>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <!--          <el-button type="primary" @click="submitFormAudit">审 核</el-button>-->
          <!--          <el-button @click="cancel">取 消</el-button>-->
          <el-button type="primary" @click="submitFormAudit(2)">通 过</el-button>
          <el-button type="primary" @click="submitFormAudit(3)">拒 绝</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 换胎服务详情对话框 -->
    <el-dialog :title="title3" v-model="open3" :width="750" :before-close="closeDialog" append-to-body>
      <el-form ref="servicerRquestRefAudit" :model="form" :rules="rules" label-width="120px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="Name">
              {{ form.Name }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="客户手机号" prop="Mobile">
              {{ form.Mobile }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="质保卡号" prop="cardNumber">
              {{ form.warrantyCardInfo != null ? form.warrantyCardInfo.cardNumber : "" }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买日期" prop="BuyDay">
              {{ form.warrantyCardInfo != null ? form.warrantyCardInfo.BuyDay : "" }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="省份" prop="Province">
              {{ form.Province }}
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="城市" prop="City">
              {{ form.City }}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="轮胎条数" prop="NewTireCode">
              {{ form.NewTireCode != null ? form.NewTireCode.length : "" }}
            </el-form-item>
          </el-col>

          <el-col :span="10">

          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="轮胎条形码" prop="NewTireCode" v-if="form.NewTireCode" >
              <div style="display: flex; flex-direction: column;">
                <div v-for="(item, key) in form.NewTireCode" :key="key" >
                  <div style="display: inline-block">

                  <span v-if="key==0" style="margin-right: 10px;">轮胎条形码1: {{ item }}
                      <span v-if="form.TireCode1Info">
                       (
                        {{ form.TireCode1Info.productCode ? form.TireCode1Info.productCode : "暂无成品代码" }} |
                        {{ form.TireCode1Info.productName ? form.TireCode1Info.productName : "暂无SIZE名" }} |
                        {{ form.TireCode1Info.productionDate ? form.TireCode1Info.productionDate : "暂无生产日期" }} |
                        {{ form.TireCode1Info.destination ? form.TireCode1Info.destination : "暂无目的地" }}
                        )
                      </span>
                  </span>
                    <ul v-if="key==0" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-if="form.Images != null && form.ImagesList.length > 0" v-for="(v,i) in form.ImagesList"
                          style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
<!--                        <span v-if="form.Images != null && form.Images.length > 0" >-->
                          <image-preview :src="form.Images" :index="i" alt="" :width="50" :height="50" />
<!--                        </span>-->
                        <span v-if="i == 0">胎面</span>
                        <span v-if="i == 1">胎側面</span>
                        <span v-if="i == 2">故障部位</span>
                        <span v-if="i == 3">DOT</span>
                        <span v-if="i == 4">条形码</span>
                      </li>
                    </ul>

                    <span v-if="key==1" style="margin-right: 10px;">轮胎条形码2: {{ item }}
                    <span v-if="form.TireCode2Info">
                    (
                      {{ form.TireCode2Info.productCode ? form.TireCode2Info.productCode : "暂无成品代码" }} |
                      {{ form.TireCode2Info.productName ? form.TireCode2Info.productName : "暂无SIZE名" }} |
                      {{ form.TireCode2Info.productionDate ? form.TireCode2Info.productionDate : "暂无生产日期" }} |
                      {{ form.TireCode2Info.destination ? form.TireCode2Info.destination : "暂无目的地" }}
                      )
                    </span>
                  </span>
                    <ul v-if="key==1" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-if="form.Images2 != null && form.Images2List.length > 0" v-for="(v, i) in form.Images2List"
                          style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
<!--                        <span v-if="form.Images2 != null && form.Images2.length > 0" >-->
                          <image-preview :src="form.Images2" :index="i" alt="" :width="50" :height="50" />
                          <span v-if="i == 0">胎面</span>
                          <span v-if="i == 1">胎側面</span>
                          <span v-if="i == 2">故障部位</span>
                          <span v-if="i == 3">DOT</span>
                          <span v-if="i == 4">条形码</span>
<!--                        </span>-->
                      </li>
                    </ul>

                    <span v-if="key==2" style="margin-right: 10px;">轮胎条形码3: {{item}}
                      <span v-if="form.TireCode3Info">
                      (
                        {{form.TireCode3Info.productCode ? form.TireCode3Info.productCode : "暂无成品代码"}} |
                        {{form.TireCode3Info.productName ? form.TireCode3Info.productName : "暂无SIZE名"}} |
                        {{form.TireCode3Info.productionDate ? form.TireCode3Info.productionDate : "暂无生产日期"}} |
                        {{form.TireCode3Info.destination ? form.TireCode3Info.destination : "暂无目的地"}}
                        )
                      </span>
                    </span>
                    <ul v-if="key==2" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-if="form.Images3 != null && form.Images3List.length > 0" v-for="(v, i) in form.Images3List" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
<!--                        <span v-if="form.Images3 != null && form.Images3.length > 0" >-->
                          <image-preview :src="form.Images3" :index="i" alt="" :width="50" :height="50" />
<!--                        </span>-->
                        <span v-if="i == 0">胎面</span>
                        <span v-if="i == 1">胎側面</span>
                        <span v-if="i == 2">故障部位</span>
                        <span v-if="i == 3">DOT</span>
                        <span v-if="i == 4">条形码</span>
                      </li>
                    </ul>

                    <span v-if="key==3" style="margin-right: 10px;">轮胎条形码4: {{item}}
                      <span v-if="form.TireCode4Info">
                      (
                        {{form.TireCode4Info.productCode ? form.TireCode4Info.productCode : "暂无成品代码"}} |
                        {{form.TireCode4Info.productName ? form.TireCode4Info.productName : "暂无SIZE名"}} |
                        {{form.TireCode4Info.productionDate ? form.TireCode4Info.productionDate : "暂无生产日期"}} |
                        {{form.TireCode4Info.destination ? form.TireCode4Info.destination : "暂无目的地"}}
                        )
                      </span>
                    </span>
                    <ul v-if="key==3" style="list-style: none; display: flex; padding: 0; margin: 0;">
                      <li v-if="form.Images4 != null && form.Images4List.length > 0" v-for="(v, i) in form.Images4List" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                        <image-preview :src="form.Images4" :index="i" alt="" :width="50" :height="50" />
                        <span v-if="i == 0">胎面</span>
                        <span v-if="i == 1">胎側面</span>
                        <span v-if="i == 2">故障部位</span>
                        <span v-if="i == 3">DOT</span>
                        <span v-if="i == 4">条形码</span>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-form-item>

            <!--   兼容之前没有条码的数据   -->
            <el-form-item label="破损图片" prop="Images" v-if="form.NewTireCode == null && form.Images != null" >
              <ul style="list-style: none; display: flex; padding: 0; margin: 0;">
                <li v-for="(v,i) in form.ImagesList" style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
                  <image-preview :src="v" alt="" :width="50" :height="50" />
                </li>
              </ul>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="申请日期" prop="Created">
              {{ form.Created }}
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="cancel">返 回</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="ServicerRquest">

const { proxy } = getCurrentInstance();
import { isExternal } from "@/utils/validate";
import { listServicerRquest, getServicerRquest, delServicerRquest, addServicerRquest, updateServicerRquest, updateAuditServicerRquest } from "@/api/merchant/servicerRquest";
let { service_servicerequest_status, sys_yes_no } = proxy.useDict('service_servicerequest_status', 'sys_yes_no');

const baseOldUrl = import.meta.env.VITE_APP_OLD_BASE_API;
const servicerRquestList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");

const title2 = ref("");
const open2 = ref(false);
const title3 = ref("");
const open3 = ref(false);

const dateRange = ref([]);
const dateRange2 = ref([]);

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    Images: null,
    Status: 1,
    OrderDay: null,
    Created: null,
    StatusMemo: null,
    MemberId: null,
    TireIndex: null,
    NewTireCode: null,
  },
  rules: {
  }
});

const { queryParams, form, rules } = toRefs(data);
let newList = []

/** 查询换胎申请列表 */
function getList() {
  loading.value = true;
  proxy.addDateRange(queryParams.value, dateRange.value, 'Time');         // 申请时间
  proxy.addDateRange(queryParams.value, dateRange2.value, 'AuditTime');   // 审核时间
  listServicerRquest(queryParams.value).then(response => {
    response.rows.ImagesList = [];
    response.rows.Images2List = [];
    response.rows.Images3List = [];
    response.rows.Images4List = [];
    servicerRquestList.value = response.rows;
    newList = response.rows;

    // 兼容老的图片数据
    servicerRquestList.value.forEach((item) => {
      let val = item.Images;
      let val2 = item.Images2 || "";
      let val3 = item.Images3 || "";
      let val4 = item.Images4 || "";
      let valNewTireCode = item.NewTireCode;
      if (val) {
        // 首先将值转为数组
        let newValArray = [];
        const list = Array.isArray(val) ? val : val.split(";");
        const list2 = Array.isArray(val2) ? val2 : val2.split(";");
        const list3 = Array.isArray(val3) ? val3 : val3.split(";");
        const list4 = Array.isArray(val4) ? val4 : val4.split(";");
        // 然后将数组转为对象数组
        list.map(v => {
          if (typeof v === "string") {
            // TODO 2024-07-31 兼容之前的数据图片转成在线地址
            if (!isExternal(v)) {
              newValArray.push(baseOldUrl + v);
            } else {
              newValArray.push(v);
            }
          }
        });

        if (newValArray.length > 0) {
          item.ImagesList = newValArray;
          item.Images = newValArray.join(";").toString();

          item.Images2List = list2;
          item.Images3List = list3;
          item.Images4List = list4;
        }
      }

      if (valNewTireCode != null && valNewTireCode != "") {
        if (valNewTireCode.indexOf("|") != -1) {
          item.NewTireCode = valNewTireCode.split("|");
        } else {
          item.NewTireCode = [valNewTireCode];
        }
      } else {
        item.NewTireCode = null;
      }
    });

    total.value = response.total;
    loading.value = false;
  });
}

// 取消按钮
function cancel() {
  open.value = false;
  open2.value = false;
  open3.value = false;
  reset();
}

// 表单重置
function reset() {
  dateRange.value = [];
  dateRange2.value = [];
  form.value = {
    Id: null,
    Images: null,
    Status: null,
    OrderDay: null,
    Created: null,
    StatusMemo: null,
    MemberId: null,
    TireIndex: null,
    NewTireCode: null,
    createBy: null,
    createTime: null,
    updateBy: null,
    updateTime: null,
    remark: null
  };
  proxy.resetForm("servicerRquestRef");
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.Id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
  reset();
  open.value = true;
  title.value = "添加换胎申请";
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  const _Id = row.Id || ids.value
  getServicerRquest(_Id).then(response => {
    form.value = response.data;
    open.value = true;
    title.value = "修改换胎申请";
  });
}

/** 审核按钮操作 */
function handleDetail(row) {
  reset();
  const _Id = row.Id || ids.value
  getServicerRquest(_Id).then(response => {
    response.data.ImagesList=[];
    response.data.Images2List=[];
    response.data.Images3List=[];
    response.data.Images4List=[];
    form.value = response.data;
    form.value.StatusMemo = '';
    let valArrStr = form.value.Images;
    let valArrStr2 = form.value.Images2 || "";
    let valArrStr3 = form.value.Images3 || "";
    let valArrStr4 = form.value.Images4 || "";
    let valNewTireCode = form.value.NewTireCode;
    if (valArrStr) {
      // 首先将值转为数组
      let newArr = [];
      const list = Array.isArray(valArrStr) ? valArrStr : valArrStr.split(";");
      const list2 = Array.isArray(valArrStr2) ? valArrStr2 : valArrStr2.split(";");
      const list3 = Array.isArray(valArrStr3) ? valArrStr3 : valArrStr3.split(";");
      const list4 = Array.isArray(valArrStr4) ? valArrStr4 : valArrStr4.split(";");
      // 然后将数组转为对象数组
      list.map(v => {
        if (typeof v === "string") {
          // TODO 2024-07-31 兼容之前的数据图片转成在线地址
          if (!isExternal(v)) {
            newArr.push(baseOldUrl + v);
          } else {
            newArr.push(v);
          }
        }
      });

      if (newArr.length > 0) {
        form.value.ImagesList = newArr;
        form.value.Images = newArr.join(";").toString();

        form.value.Images2List = list2;
        form.value.Images3List = list3;
        form.value.Images4List = list4;
      }
    }

    if (valNewTireCode != null && valNewTireCode != "") {
      if (valNewTireCode.indexOf("|") != -1) {
        form.value.NewTireCode = valNewTireCode.split("|");
      } else {
        form.value.NewTireCode = [valNewTireCode];
      }
    } else {
      form.value.NewTireCode = null;
    }

    open3.value = true;
    title3.value = "换胎申请详情";
  });
}

/** 审核按钮操作 */
function handleAudit(row) {
  reset();
  const _Id = row.Id || ids.value
  getServicerRquest(_Id).then(response => {
    response.data.ImagesList=[];
    response.data.Images2List=[];
    response.data.Images3List=[];
    response.data.Images4List=[];
    form.value = response.data;
    form.value.StatusMemo = '';
    let valArrStr = form.value.Images;
    let valArrStr2 = form.value.Images2 || "";
    let valArrStr3 = form.value.Images3 || "";
    let valArrStr4 = form.value.Images4 || "";
    let valNewTireCode = form.value.NewTireCode;
    if (valArrStr) {
      // 首先将值转为数组
      let newArr = [];
      const list = Array.isArray(valArrStr) ? valArrStr : valArrStr.split(";");
      const list2 = Array.isArray(valArrStr2) ? valArrStr2 : valArrStr2.split(";");
      const list3 = Array.isArray(valArrStr3) ? valArrStr3 : valArrStr3.split(";");
      const list4 = Array.isArray(valArrStr4) ? valArrStr4 : valArrStr4.split(";");
      // 然后将数组转为对象数组
      list.map(v => {
        if (typeof v === "string") {
          // TODO 2024-07-31 兼容之前的数据图片转成在线地址
          if (!isExternal(v)) {
            newArr.push(baseOldUrl + v);
          } else {
            newArr.push(v);
          }
        }
      });
      if (valNewTireCode) {
        form.value.NewTireCode = Array.isArray(valNewTireCode) ? valNewTireCode : valNewTireCode.split("|");
      }

      if (newArr.length > 0) {
        form.value.ImagesList = newArr;
        form.value.Images = newArr.join(";").toString();

        form.value.Images2List = list2;
        form.value.Images3List = list3;
        form.value.Images4List = list4;
      }
    }

    open2.value = true;
    title2.value = "审核换胎申请";
  });
}

/** 提交按钮 */
function submitForm() {
  proxy.$refs["servicerRquestRef"].validate(valid => {
    if (valid) {
      if (form.value.Id != null) {
        updateServicerRquest(form.value).then(response => {
          proxy.$modal.msgSuccess("修改成功");
          open.value = false;
          getList();
        });
      } else {
        addServicerRquest(form.value).then(response => {
          proxy.$modal.msgSuccess("新增成功");
          open.value = false;
          getList();
        });
      }
    }
  });
}

/** 提交审核按钮 */
function submitFormAudit(status) {
  if (status == 3 && form.value.StatusMemo == '') {
    proxy.$modal.msgWarning("请填写审核意见");
    return;
  }

  proxy.$refs["servicerRquestRefAudit"].validate(valid => {
    if (valid) {
      if (form.value.Id != null) {
        let data = {
          Id: form.value.Id,
          Status: status,
          StatusMemo: form.value.StatusMemo,
        }
        updateAuditServicerRquest(data).then(response => {
          proxy.$modal.msgSuccess("审核成功");
          open2.value = false;
          getList();
        });
      }
    }
  });
}

/** 删除按钮操作 */
function handleDelete(row) {
  const _Ids = row.Id || ids.value;
  proxy.$modal.confirm('是否确认删除换胎申请编号为"' + _Ids + '"的数据项？').then(function() {
    return delServicerRquest(_Ids);
  }).then(() => {
    getList();
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download('merchant/servicerRquest/export', {
    ...queryParams.value
  }, `servicerRquest_${new Date().getTime()}.xlsx`)
}

function getTextWidth (str) {
  let width = 0
  const html = document.createElement('span')
  html.innerText = str
  html.className = 'getTextWidth'
  document.querySelector('body').appendChild(html)
  width = document.querySelector('.getTextWidth').offsetWidth
  document.querySelector('.getTextWidth').remove()
  return width
}

//遍历列的所有内容，获取最宽一列的宽度
function getMaxLength (arr) {
  return arr.reduce((acc, item) => {
    if (item) {
      const calcLen = getTextWidth(item)
      if (acc < calcLen) {
        acc = calcLen
      }
    }
    return acc
  }, 0)
}

/**
 * el-table-column 自适应列宽
 * @param prop_label: 表名
 * @param table_data: 表格数据
 */

function flexColumnWidth (label, prop) {
// 1.获取该列的所有数据
  const arr = newList.map(x => x[prop])
// 把每列的表头也加进去算
  arr.push(label)
// 2.计算每列内容最大的宽度 + 表格的内间距（依据实际情况而定）
  return (getMaxLength(arr) + 40) + 'px';
}

function closeDialog(done){
  //console.log(222);
  const a = document.getElementsByClassName('el-image-viewer__wrapper')[0];
  //console.log(a);
  if(!a){
    done()
  }
}

function changeStatus() {
  let status = queryParams.value.Status;
  if (!status) {
    queryParams.value.Status = 0
  }
}

function clearStatus() {
  queryParams.value.Status = 0
}

getList();
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 4px !important;
}

.el-form--inline .el-form-item {
  margin-right: 0px;
}

.el-input{
  margin-right: 10px;
}
</style>
